<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>

        <style>

            .selected{
                background-color: #ffee99;
            }

        </style>


        <script>

            function f1(){

                var obj=document.getElementById("a1");

                console.log(obj);

                //innerHTML：表示节点之间的内容

                console.log(obj.innerHTML);

                obj.innerHTML="<h1>click</h1>";

            }

            function fn(obj){
                obj.className="selected";
            }


            function view(){
                var obj=document.getElementById("u1");

                var arr=obj.childNodes;

                console.log(arr.length);

                // for(var i=0;i<arr.length;i++){
                //     arr[i].className="selected";
                // }

                arr.forEach(function(item,index){
                    console.log(item);
                    console.log(index);
                    item.className="selected";
                });
            }

            function view2(){
                var obj=document.getElementById("u1");
                var arr=obj.getElementsByTagName("li");


                console.log(arr);

                for(var i=0;i<arr.length;i++){
                    arr[i].className="selected";
                }
            }
        </script>
    </head>
    <body>

        <a id="a1" href="javascript:;" onclick="f1();"><h1>test</h1></a>

        <a href="javascript:;" onclick="fn(obj);">当前节点</a>
        <a href="javascript:;" onclick="fn(obj.parentNode);">父节点</a>
        <a href="javascript:;" onclick="fn(obj.previousSibling.previousSibling);">上一个节点</a>
        <a href="javascript:;" onclick="fn(obj.nextSibling.nextSibling);">下一个节点</a>
        <a href="javascript:;" onclick="fn(obj.parentNode.firstChild.nextSibling);">第一个节点</a>
        <a href="javascript:;" onclick="fn(obj.parentNode.lastChild.previousSibling);">最后一个节点</a>
        <a href="javascript:;" onclick="view();">所有节点</a>
        <a href="javascript:;" onclick="view2();">所有节点</a>




        <ul id="u1">
            <li>item1</li>
            <li>item2</li>
            <li id="i3">item3</li>
            <li>item4</li>
            <li>item5</li>
        </ul>

        <li>item6</li>

    </body>

    <script>

        var obj=document.getElementById('i3');

    </script>
</html>